<template>
    <div class="bg-content">
        <div class="title">
            <img src="@/assets/home/cricle.png" alt="" class="title-pl" />
            <span class="s-title">
                <span class="title-name">&nbsp;&nbsp;终端数量</span>
            </span>
            <span class="right-light">
<!--                <span class="active">两轮</span>&nbsp;&nbsp;-->
<!--                <span>四轮</span>-->
               <span :class="{ active: currentType === '2' }"  @click="changeStatus('2')">两轮</span>&nbsp;&nbsp;
    <span :class="{ active: currentType === '4' }"   @click="changeStatus('4')">四轮</span>
            </span>
        </div>
        <div class="content" id="echarts6"></div>
    </div>
</template>

<script>
import echarts from "echarts";
import axios from "axios";
export default {
  props: {
    regionId: {
      type: String,
      default: '100000',
    },
  },
  watch: {
    regionId(newVal) {
      //console.log("新的区域IDnnnnnnnnnnnnnnnnnn:", newVal);
      // 在这里可以根据新的区域ID重新请求数据或更新图表
      this.getData();
      this.getregionId(newVal);
    },
    currentType(newVal){
      this.getData();
    }

  },
    data() {
        return {
          currentType : '2', // 默认选中两轮
          out_count: 0,
          out_ratio: "0.00",
          rest_count: 0,
          work_count: 0,
          allCount: 0,
          work_ratio: "0.00",
          rest_ratio: "0.00",
        };
    },
    mounted() {
        this.getData();
    },

    methods: {
      //切换点击
      changeStatus(status) {
        this.currentType = status;
        console.log(this.currentType)
        // 在这里可以添加额外的逻辑，比如根据当前状态更新图表数据
      },
      getData() {
        const regionId = this.regionId;
        if (this.currentType === '2') {
          // 如果 currentType 为 'two'，调用对应的接口
          axios.get(`${this.$httpUrl}terminal?id=${regionId}`)
              .then(response => {
                const data = response.data;
                this.out_count = data.out_count;
                this.out_ratio = data.out_ratio;
                this.rest_count = data.rest_count;
                this.work_count = data.work_count;
                this.allCount = data.allCount;
                this.work_ratio = data.work_ratio;
                this.rest_ratio = data.rest_ratio;

                this.init(); // 在获取数据后初始化图表
              })
              .catch(error => {
                console.error("获取两轮数据失败:", error);
              });
        } else if (this.currentType === '4') {
          // 如果 currentType 为 'four'，调用另一接口或方法
          axios.get(`${this.$httpUrl}terminal_four?id=${regionId}`)
              .then(response => {
                const data = response.data;
                this.out_count = data.out_count;
                this.out_ratio = data.out_ratio;
                this.rest_count = data.rest_count;
                this.work_count = data.work_count;
                this.allCount = data.allCount;
                this.work_ratio = data.work_ratio;
                this.rest_ratio = data.rest_ratio;

                this.init(); // 在获取数据后初始化图表
              })
              .catch(error => {
                console.error("获取四轮数据失败:", error);
              });
          // axios.get(`http://localhost:8080/lay/terminal?id=${regionId}`)
          //     .then(response => {
          //       const data = response.data;
          //       this.out_count = data.out_count;
          //       this.out_ratio = data.out_ratio;
          //       this.rest_count = data.rest_count;
          //       this.work_count = data.work_count;
          //       this.allCount = data.allCount;
          //       this.work_ratio = data.work_ratio;
          //       this.rest_ratio = data.rest_ratio;
          //
          //       this.init(); // 在获取数据后初始化图表
          //     })
          //     .catch(error => {
          //       console.error("获取数据失败:", error);
          //     });
        }
      },
        init() {
            var Aengin = echarts.init(document.getElementById("echarts6"));
            var colorList = [
                "#73DDFF",
                "#73ACFF",
                "#FDD56A",
                "#FDB36A",
                "#FD866A",
                "#9E87FF",
                "#58D5FF",
            ];
            Aengin.setOption({
                title: {
                    text: "终端",
                    x: "center",
                    y: "center",
                    textStyle: {
                        fontSize:14,
                        color:"#ffffff"
                    },
                },
                tooltip: {
                    trigger: "item",
                },
                series: [
                    {
                        type: "pie",
                        center: ["50%", "50%"],
                        radius: ["45%", "70%"],
                        clockwise: true,
                        avoidLabelOverlap: true,
                        hoverOffset: 15,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return colorList[params.dataIndex];
                                },
                            },
                        },
                        label: {
                            show: true,
                            position: "outside",
                           // formatter: '{b}\n数量:98个\n占比：{d}%',
                          formatter: (params) => {
                            return `${params.name}\n数量: ${params.value}个\n占比：${params.percent.toFixed(2)}%`;
                          },
                            rich: {
                                hr: {
                                    /*
            再次声明一下，大家在这里修改之后不要点击上面的保存！
    不要点击保存！不要点击保存！重要的事情说三遍！
    你的修改会覆盖我的原代码的！感谢理解！
                                --2020/8/4  by--suwanqing
                    */
                                    backgroundColor: "t",
                                    borderRadius: 3,
                                    width: 3,
                                    height: 3,
                                    padding: [3, 3, 0, -12],
                                },
                                a: {
                                    padding: [-30, 15, -20, 15],
                                },
                            },
                        },
                        labelLine: {
                            normal: {
                                length: 10,
                                length2: 20,
                                lineStyle: {
                                    width: 1,
                                },
                            },
                        },
                        data: [
                            {
                                name: "工作中",
                                value: this.work_count || 0,  // 确保有值，默认是 0
                            },
                            {
                                name: "待机中",
                                value: this.rest_count || 0,

                            },
                            {
                                name: "离线中",
                                value: this.out_count || 0,
                            },
                        ],
                    },
                ],
            });
        },
    },
};
</script>


<style lang="less" scoped>
.bg-content {
    height: calc((100vh - 0.75rem) / 3 - 0.18rem);
    margin-bottom: 0.05rem;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(to right,#000606, #44c9c9) 1;
    padding: 0.05rem;
    .title {
        font-size: 0.18rem;
        color: #ffffff;
        font-weight: bold;
        position: relative;
        height: 0.35rem;
        line-height: 0.35rem;
        text-align: left;
        border-bottom: 3px solid transparent;
        border-image: linear-gradient(to right, #3aacac, #000202) 1;
        .title-name {
            font-size: 0.14rem;
        }
        .title-pl {
            position: relative;
            top: 0.05rem;
        }
        .right-light {
            position: absolute;
            right: 0;
            display: inline-block;
            font-size: 0.14rem;
            padding: 0;
            height: 0;
            font-weight: 400;
            span {
                padding: 2px 5px;
                background-color: #091a1a;
                cursor: pointer;
            }
        }
        .active {
            background-image: url("./../../../assets/home/sun.png");
        }
    }
    .content {
        height: calc((100vh - 0.75rem) / 3 - 0.18rem - 0.45rem);
    }
}
</style>
